<template>
	<div class="music">
		<div  v-if="!isShow" class="musicSearch">
			<el-input v-model="musicQuery" @change ="musicSearch" placeholder="请输入歌名" size="medium"></el-input>
			<el-button type="primary" @click ="musicSearch" size="medium">搜索</el-button>
		</div>
		<div class="musicTip">
			<span v-if="musicTip" style="text-align: center; font-size: 20px;">{{musicTip}}</span>
		</div>
		<div v-if="musicList!='' && !isShow" class="musicScreen">
			<div class="left">
				<ul class="musicList">
					<li v-for="item in musicList">
						<a href="javascript:;" v-if="item.mvid!=0" @click="playMV(item.mvid)" class="el-icon-video-camera-solid"></a>
						<span v-if="item.mvid==0"></span>
						<a href="javascript:;" @click="musicPlay($event,item.id)">{{item.name}}</a>
					</li>
				</ul>
			</div>
			<div class="middle">
				<div>
					<img :src="musicCover" v-show="musicCover!=''"/>
				</div>
			</div>
			<div class="right">
				<div><span>热门留言</span></div>
				<ul v-if="musicHotComments!=''" class="musicComments">
					<li v-for="item in musicHotComments">
						<img :src="item.user.avatarUrl" />
						<div class="musicUserComment">
							<div>{{item.user.nickname}}</div>
							<span>{{item.content}}</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div v-if="!isShow" class="musicAudio">
			<audio :src="musicUrl" @play="play" @pause="pause" controls autoplay loop ></audio>
		</div>
		<div v-if="isShow" class="musicVideo">
			<div class="el-icon-close"  @click="hide"></div>
			<video :src="musicMvUrl" controls autoplay loop></video>
		</div>
		<!-- 播放状态 -->
		<div :class="{playing:isPlaying}"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				musicQuery: "",			//查询关键字
				musicList: [],			//歌曲数组
				musicUrl: "",			//歌曲地址
				musicCover: require("../assets/music/vinyl.png"),		//歌曲封面
				musicHotComments: [],	//歌曲评论
				isPlaying: false,		//播放状态
				isShow: false,			//遮罩层显示状态
				musicMvUrl: "",			//mv地址
				musicTip: "",
				preObj: "",
			}
		},
		methods: {
			//搜索音乐
			musicSearch(){
				var _this = this;
				//https://autumnfish.cn/search?keywords=
				_this.$axios.get("/music/search?keywords="+this.musicQuery).then(
					function(response){
						console.log(response.data.result.songs)
						_this.musicList = response.data.result.songs;
						_this.musicTip = "";
					},
					function(err){
						_this.musicTip = "系统繁忙,请稍后再试..."
					}
				)
			},
			musicPlay(e,musicId){
				var _this = this;
				//获取歌曲地址 https://autumnfish.cn/song/url?id=
				_this.$axios.get("/music/song/url?id="+musicId).then(
					function(response){
						// console.log(response);
						_this.musicUrl=response.data.data[0].url;
					},function(err){ }
				)
				//获取歌曲详情 https://autumnfish.cn/song/detail?ids=
				_this.$axios.get("/music/song/detail?ids="+musicId).then(
					function(response){
						// console.log(response);
						_this.musicCover = response.data.songs[0].al.picUrl;
					},function(err){ }
				)
				//获取歌曲评论 https://autumnfish.cn/comment/hot?type=0&id=
				_this.$axios.get("/music/comment/hot?type=0&id="+musicId).then(
					function(response){
						// console.log(response);
						_this.musicHotComments = response.data.hotComments;
					},function(err){ }
				)
				
				e.target.style.color = "red";
				if(this.preObj!="") this.preObj.style.color = "#222";
				this.preObj = e.target;
			},
			play(){
				this.isPlaying = true;
			},
			pause(){
				this.isPlaying = false;
			},
			playMV(mvId){
				var _this = this;
				//获取MV https://autumnfish.cn/mv/url?id=
				_this.$axios.get("/music/mv/url?id="+mvId).then(
					function(response){
						// console.log(response);
						_this.musicMvUrl=response.data.data.url;
						_this.isShow=true;
					},function(err){ }
				)
			},
			hide(){
				this.isShow=false;
			}
		},
	}
</script>

<style scoped>
	.music {
		position: relative;
		width: 100%;
	}
	.music .musicSearch {
		display: table;
	}
	.music .musicSearch .el-input{
		display: table-cell;
	}
	.music .musicSearch .el-button{
		display: table-cell;
	}
	
	.music .musicScreen{
		display: table;
		table-layout: fixed;
	}
	
	.music .musicScreen .left{
		display: table-cell;
		height: 200px;
	}
	.music .musicScreen .left .musicList{
		height: 100%;
		width: 100%;
		overflow: auto;
		text-align: left;
	}
	.music .musicScreen .left .musicList li{
		height: 30px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* width: 100%;
		max-width: 1px; */
		
	}
	.music .musicScreen .left .musicList li:nth-child(2n+1){
		background-color: rgba(0,0,0,0.04);
	}
	.music .musicScreen .left .musicList li a:nth-of-type(1){
		width: 20px;
	}
	.music .musicScreen .left .musicList li span{
		margin-left: 20px;
	}
	.music .musicScreen .left .musicList li a{
		color: #222;
	/* 	white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; */
	}
	.music .musicScreen .left .musicList li a:hover{
		color: brown;
	}
	
	.music .musicScreen .middle{
		display: table-cell;
		background: #000000;
	}
	.music .musicScreen .middle img{
		width: 100%;
		height: 100%;
		vertical-align:top;
	}
	
	.music .musicScreen .right{
		text-align: left;
		height: 200px;
	}
	.music .musicScreen .right>div{
		padding: 0 0 0 10px;
		font-weight: 600;
		height: 9%;
	}
	.music .musicScreen .right .musicComments{
		height: 90%;
		width: 100%;
		overflow: auto;
	}
	.music .musicScreen .right .musicComments li{
		padding: 0 10px 0 10px;
	}
	.music .musicScreen .right .musicComments img{
		float: left;
		vertical-align:middle;
		height: 40px;
		border-radius: 45px;
	}
	.music .musicScreen .right .musicComments .musicUserComment{
		padding-left: 40px;
		margin: 0 0 18px 0;
	}
	.music .musicScreen .right .musicComments .musicUserComment div{
		padding: 5px 0px 5px 5px;
		font-size: 14px;
	}
	.music .musicScreen .right .musicComments .musicUserComment span{
		font-size: 13px;
		color: #666;
	}
	
	.music .musicAudio {
		background-color: rgb(68, 68, 68);
		border-radius: 0 0 4px 4px;
	}
	.music .musicAudio audio {
		width: 100%;
		background-color: #f1f3f4;
	}
	
	.music .musicVideo video {
		width: 100%;
		height: 100%;
	}
	.music .musicVideo:hover .el-icon-close{
		display: block;
	}
	.music .musicVideo .el-icon-close {
		display: none;
		position: absolute;
		color: #fff;
		z-index: 100;
		text-shadow:2px 1px 3px #000;
	}
	
	@media screen and (min-width: 1200px){
		.music .musicAudio{
			height: 50px;
			border-radius: 0 0 4px 4px;
		}
		.music .musicAudio audio {
			height: 50px;
			border-radius: 0 0 4px 4px;
		}
		
		.music .musicScreen .left{
			/* width: 23%; */
			min-width: 258px;
			max-width: 258px;
		}
		.music .musicScreen .left .musicList li{
			font-size: 17px;
		}
		.music .musicScreen .middle{
			width: 54%;
		}
		.music .musicScreen .right{
			display: table-cell;
			width: 23%;
		}
		.music .musicScreen .right>div{
			font-size: 24px;
			line-height: 20px;
		}
		.music .musicScreen .right>div>span{
			vertical-align: -80%;
		}
		
		.music .musicVideo .el-icon-close {
			right: 10px;
			top: 10px;
			font-size: 50px;
		}
	}
	@media screen and (max-width: 1200px){
		.music .musicAudio{
			height: 50px;
			border-radius: 0 0 4px 4px;
		}
		.music .musicAudio audio {
			height: 50px;
			border-radius: 0 0 4px 4px;
		}
		
		.music .musicScreen .left{
			/* max-width: 23%; */
			min-width: 137px;
			max-width: 137px;
		}
		.music .musicScreen .left .musicList li{
			font-size: 16px;
		}
		.music .musicScreen .middle{
			width: 54%;
		}
		.music .musicScreen .right{
			display: table-cell;
			width: 23%;
		}
		.music .musicScreen .right>div{
			font-size: 20px;
			line-height: 20px;
		}
		.music .musicScreen .right>div>span{
			vertical-align: -10%;
		}
		
		.music .musicVideo .el-icon-close {
			right: 10px;
			top: 10px;
			font-size: 50px;
		}
	}
	@media screen and (max-width: 767px){
		.music .musicAudio{
			height: 25px;
			border-radius: 8px 8px 8px 8px;
		}
		.music .musicAudio audio {
			height: 25px;
			border-radius: 8px 8px 8px 8px;
		}
		.music .musicScreen .left{
			width: 23%;
		}
		.music .musicScreen .left .musicList li{
			font-size: 14px;
		}
		.music .musicScreen .middle{
			min-width: 77%;
		}
		.music .musicScreen .right{
			display:none;
			width: 0%;
		}
		
		.music .musicVideo .el-icon-close {
			right: 10px;
			top: 10px;
			font-size: 30px;
		}
	}
	
	.musicList::-webkit-scrollbar, .musicComments::-webkit-scrollbar{
		height: 4px;
		width: 8px;
	}
	.musicList::-webkit-scrollbar-thumb, .musicComments::-webkit-scrollbar-thumb{
		background: #bbb;
		border-radius: 25px;
	}
	.musicList::-webkit-scrollbar-track, .musicComments::-webkit-scrollbar-track{
		background: rgba(0,0,0,0.05); 
		border-radius: 25px;
	}
</style>
